<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05_图片切换</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            border: 1px solid #ccc;
            width: 450px;
            height: 70px;
            padding-top: 430px;
            /* background: url('images/big_pic1.jpg') no-repeat; */
        }
        #box ul li{
            display: inline-block;
            margin-right: 35px;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li id="item1">
                <img src="images/pic1.jpg">
            </li>
            <li id="item2">
                <img src="images/pic2.jpg">
            </li>
            <li id="item3">
                <img src="images/pic3.jpg">
            </li>
            <li id="item4">
                <img src="images/pic4.jpg">
            </li>
            <li id="item5">
                <img src="images/pic5.jpg">
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        // 初学者 书写的方式
        // 1.获取事件源
        /*
        var item1 = document.getElementById('item1');
        var item2 = document.getElementById('item2');
        var item3 = document.getElementById('item3');
        var item4 = document.getElementById('item4');
        var item5 = document.getElementById('item5');
        var oBox = document.getElementById('box');

        item1.onmouseover = function(){
            oBox.style.background = `url('images/big_pic1.jpg') no-repeat`
        }
        item2.onmouseover = function(){
            oBox.style.background = `url('images/big_pic2.jpg') no-repeat`
        }
        item3.onmouseover = function(){
            oBox.style.background = `url('images/big_pic3.jpg') no-repeat`
        }
        item4.onmouseover = function(){
            oBox.style.background = `url('images/big_pic4.jpg') no-repeat`
        }
        item5.onmouseover = function(){
            oBox.style.background = `url('images/big_pic5.jpg') no-repeat`
        }
        */
        var oBox = document.getElementById('box');

        // 1.获取事件源
        function $(id){
            return typeof id === 'string' ? document.getElementById(id) :null;
        }

        // 改变背景图
        function changebgcImg(liId,imgSrc){
            // 2.添加事件
            $(liId).onmouseover = function(){
                // 3.改变背景图
                $('box').style.background = imgSrc;
            }
        }
        changebgcImg('item1',`url('images/big_pic1.jpg') no-repeat`);
        changebgcImg('item2',`url('images/big_pic2.jpg') no-repeat`);
        changebgcImg('item3',`url('images/big_pic3.jpg') no-repeat`);
        changebgcImg('item4',`url('images/big_pic4.jpg') no-repeat`);
        changebgcImg('item5',`url('images/big_pic5.jpg') no-repeat`);

    </script>
</body>
</html>